<template>
	<view>
		<view class="items">
			<text class="status">进行中</text>
			<view class="itm">
				<image src="/static/tp.png" mode=""></image>
				<view class="ri">
					<view class="tl">
						<text class="top">深度保洁4小时+油烟机拆洗+灶台清洗</text>
						<text class="bot">服务开始时间：2025-02-19 10:00:00 </text>
						<text class="bot">服务结束时间：2025-02-19 14:00:00 </text>
						<text class="fwdd">服务地点：保定xxxxxxxxx</text>
					</view>
		 
				</view>
			</view>
			<view class="hj">
		
				<view class="top">
					<text>合计：</text>
					<text style="color: #e23b2e;">￥168</text>
			 
				</view>
				<view class="bott" @click="gotoP">
					<u-button type="primary" color="#505050" size="mini" :plain="true" text="查看进度"
						shape="circle"></u-button>
		
		
				</view>
			</view>
		
		
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			gotoP(){
				this.$toPage("/otherPage/Progress/Progress","id",1)
			}
		}
	}
</script>

<style lang="less">
	
	.items {
		padding: 10px;
		margin: 8px;
		background-color: #ffffff;
		border-radius: 8px;
		.status {
			color: #e54133;
			font-family: "Gill Sans", sans-serif;
			font-size: 14px;
		}
	
		.itm {
			display: flex;
			justify-content: space-between;
			image {
				width: 100px;
				height: 100px;
				border-radius: 8px;
			}
	
			.ri {
				.tl {
				display: flex;
				flex-direction: column;
				justify-content: center;	
					.top {
						font-size: 16px;
						font-weight: bold;
					}
	
					.bot,.fwdd {
						font-size: 14px;
						margin-top: 6px;
						color: #535353; 
					}
					
				}
	
				.bl {}
			}
		}
	
		.hj {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-end;
			.top {
				font-size: 14px;
			}
	
			.bott {
				margin-top: 4px;
			}
	
	
		}
	}

</style>
